<script lang="ts">
  import { replaceState } from '$app/navigation';
  import { onMount, tick } from 'svelte';

  import type { PageProps } from './$types';
  import { resolve } from '$app/paths';
  import { page } from '$app/state';
  import { forceTrailingSlash } from '$/lib';
  import Post from '$/lib/blog/Post.svelte';

  let { data }: PageProps = $props();

  onMount(() => {
    tick().then(() =>
      replaceState(
        forceTrailingSlash(
          resolve('/blog/[id=int]-[slug]', {
            id: data.post.metadata.id.toString(),
            slug: data.post.metadata.slug,
          }),
        ),
        page.state,
      ),
    );
  });
</script>

<Post post={data.post} />
